iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
Software Development

QA 三十天養成日記系列 第 29

[Day29][小工具] charles 神器,能輕鬆抓取 APP 上的封包

  • 分享至 

  • xImage
  •  

Charles 是在電腦上運行的 Web Proxy (HTTP Proxy / HTTP Monitor),很多時候我們需要帶入參數、返回的 response、查看 request 的各種 header、協議、響應時間等等
Charles 通過將自己設置為系統的網絡訪問代理服務器,這樣所有的 request 都會通過它,從而實現截獲和分析。
Chareles 不僅可以分析電腦本機的網絡請求(HTTP和HTTPS),還可以分析手機端的 request

簡單定義的話,charles 就是一個抓包工具,但!什麼是抓包?

快速釐清

什麼是封包?

瀏覽器開啟 devtool,點擊 Network 後,會看一系列的資訊,那些資訊就是所謂的【封包】。
封包的內容不僅限於 API,連同 jpg/png/js/css/json 等等多種檔案,只要可以讓瀏覽器對該網站進行渲染完成的資訊,都是【封包】。

什麼是封包?

那所謂的【抓包】?

客戶端對伺服器端進行溝通資料傳遞時,過程中間多了一位程咬金,會取得任一封包後,可以攔截且自行修改任一參數值後,再回傳給 server 端,就可以偽造是 user 的操作
所以這種操作手法也很容易出現是駭客的操作手法之一。

當使用電腦端的瀏覽器時,按照上方圖片說明,是可以非常容易取得且查看封包的,並且可以直接進行測試或者程式相關撰寫。

但針對手機端時就會無法重現,因為手機端的瀏覽器是無法輕易打開 devtool

但這時候又需要取得手機 封包才能進行測試時,該怎麼辦?


簡單介紹

看完上方的介紹後,相信大家都了解了 charles 就是一個抓包的工具。

可以使用 WebProxy(HTTP Proxy / HTTP Monitor) ,透過代理伺服器(Proxy Server)機制,瀏覽器或其他有透過網路的應用程式,將透過設定 Charles 顯示或記錄所有的發送或接收的數據

Charles 主要的功能包括:

  • 截取 Http 和 Https 網絡封包
  • 支持重發網絡請求,方便後端調試
  • 支持修改網絡請求參數
  • 支持網絡請求的截獲並動態修改
  • 支持模擬慢速網絡
WebProxy(HTTP Proxy / HTTP Monitor) 、Proxy Server 等專有名詞
若有不懂的請先自行 google 大致了解一下即可,此篇不細講

安裝

Charles 官方下載連結

安裝太簡單了,不多做說明,就依照自己電腦的系統自行下載並安裝即可。


快速設定教學

Step1. 基本的代理設定

【Windows Proxy】 通常預設都會自動打勾,表示會自動抓取電腦 web 上的封包。

(此文章主要以抓 app 封包為主,所以可以先將它取消打勾)

通常這欄位名稱會依照電腦系統不同而有所改變,但實際上效果都是一樣的

  • windows→ Windows Proxy
  • mac → Mac Proxy

【Proxy Settings…】就是在設定 代理伺服器(Proxy) 的部分,點擊開啟視窗後,將會看到以下畫面

【Port】 可以自行決定,只要與手機的網路的代理伺服器設定相同即可(通常使用預設 8888 就行了),稍後下面會細講到手機的 proxy 設定。

【Support HTTP/2】勾選表示支援 HTTP/2 協定。詳細可參考: Http/2 是什麼?你的網站升級到 HTTP/2 了嗎?

【Enable transparent HTTP proxying】勾選則表示 charles 開啟代理的角色。

Step2. 設定 SSL,確保可以撈取 HTTPS 的封包


【SSL Proxy Settings】主要是設定 HTTPS 的封包可以進行撈取。


【Add】新增你要的 host 網域、port 號,若設定 * 則表示全部網址、port 號都可以。

【SSL Proxying】這部分主要是可以設定限制某網域、某 port 號指定抓包,則表示所有網站的封包都會抓以

【Enable SSL Proxying】設定要啟用 SSL Proxying,主要是可以針對 HTTPS 的封包進行撈取

若此部分未設定可能封包回傳的內容都會顯示亂碼,或是撈不到資料

Step3. 確認你當前的 IP


通常第一筆就會是你的 IP位置了

若仍然不太確定的話可以開啟你的 cmd(windows系統)/terminal(mac統),輸入 ipconfig 也可以查詢到你的 ip 位置

這 IP 位置很重要,稍後手機設定時,就會需要使用到

Step4. 安裝電腦憑證

這部分需要安裝好 CA(憑證)才行
電腦需安裝(Install Charles Root Certificate)

  • windwos 安裝步驟

    (若已正確安裝人,文字則會顯示上方原來的文字)

    看到此畫面表示已經安裝完成了~

  • mac 安裝步驟

    看到此畫面表示已經安裝完成了~

Step5. 設定手機代理伺服器


先找到你目前連線的 Wifi,點擊【設定代理伺服器】,並點擊並開啟詳細的設定(如上圖)

切換成【手動】後

  • IP 為上方先前的確認的
  • port 號為一開始設定的 8888(實際情況依照自己的設定為主)

Step6. 安裝手機憑證


手機需安裝(Install Charles Root Certificate on a Mobile Device Remote Browser)

  • 記住需讓電腦與手機使用【相同網路】

  • 然後開啟在手機瀏覽器中輸入 chls.pro/ssl

  • 就可以下載憑證,並且直接安裝

  • 手機安裝步驟

最後還有非常重要的步驟!!!一定要記得!!!

點擊 設定 → 一般 → 關於本機 → (畫面拉到最下面)憑證信用設定 → 開啟 charles 憑證

可參考:https://juejin.cn/post/6967317908351352845

Step7. 確認 charles 是否可以正常運作

設定成功後,預期為像是以下這樣,封包內的資料都可以順利取得。

IOS 小地雷分享

  • 先安裝好憑證(CA)至手機上,確認不要過期
  • 務必人工開啟憑證授權,否則 HTTPS 系列的封包都會無法抓到
    • 設定 → 一般 → 關於本機 → 憑證信任設定 → 開啟 Charles Proxy CA(XX XXX XXX(安裝日期))
  • 使用完 Charles 後,記得把手機 Wifi 的代理伺服器關掉,不然會出現連不到網路的情況
  • 回傳結果出現亂碼:Charles抓包时request和respond都出现乱码

參考來源


上一篇
[Day28][持續整合] 使用 Github + CircleCi 建至屬於自己 CI
下一篇
[Day30] 2022 QA 養成日記休刊 - 媽!我終於撐過三十天了啊!
系列文
QA 三十天養成日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言